// 主色
$colors: (
  333: '#333',
  fff: '#fff',
  000: '#000',
  main:'#B53949', // 主色调
  bed4da: '#BED4DA', // 开屏页的信息
  e7e7e7: '#e7e7e7', // 首页背景色
  c4c4c4: '#c4c4c4', // 未登录的背景色
  mask: 'rgba(0, 0, 0, 0.5)', // 遮罩
  fbfcff:'#fbfcff', // rank 的文字色
  4653a4:'#4653a4', // 首页 task title 背景色
  555:'#555555', // 首页 task title default 色
  efeff8:'#EFEFF8', // 我的荣耀页 分享按钮 背景色
  959595:'#959595', // 忘记了.
  d4d4d4: '#d4d4d4', // 未选择班级的按钮颜色
);
@each $key, $value in $colors {
  .cor_#{$key} {color: #{$value};}
  .bg_#{$key}{background-color: #{$value}}
}
// 生成 10 到 99 的字体大小
@for $i from 10 through 99 {
  @if $i % 2 == 0 {
    .size_#{$i} { font-size: #{$i}px; };
    .size_#{$i}_n { font-size: #{$i}PX; };
    .lh_#{$i} { line-height: #{$i}px; };
    .lh_#{$i}_n { line-height: #{$i}PX; };
  }
}
// 生成 字体加粗
@each $value in 100,200,300,400,500,600,700,800,900 {
  .size_#{$value} {font-weight: #{$value};}
}
// 生成行高
$lineHeights: ('1': 1, '1d2': 1.2, '1d4': 1.4, '1d6': 1.6, '1d8': 1.8, '2': 2);
@each $key, $value in $lineHeights {
  .lh_#{$key} {line-height: #{$value};}
}
// 生成 padding margin
@for $i from 8 through 60 {
  @if $i % 2 == 0 {
    .pd_#{$i} { padding: #{$i}px };
    .pd_#{$i}_n { padding:#{$i}PX };
    .pd_l_#{$i} { padding-left:#{$i}px };
    .pd_l_#{$i}_n { padding-left:#{$i}PX };
    .pd_t_#{$i} { padding-top:#{$i}px };
    .pd_t_#{$i}_n { padding-top:#{$i}PX };
    .pd_r_#{$i} { padding-right:#{$i}px };
    .pd_r_#{$i}_n { padding-right:#{$i}PX };
    .pd_b_#{$i} { padding-bottom:#{$i}px };
    .pd_b_#{$i}_n { padding-bottom:#{$i}PX };
    .mg_#{$i} { margin: #{$i}px };
    .mg_#{$i}_n { margin:#{$i}PX };
    .mg_l_#{$i} { margin-left:#{$i}px };
    .mg_l_#{$i}_n { margin-left:#{$i}PX };
    .mg_t_#{$i} { margin-top:#{$i}px };
    .mg_t_#{$i}_n { margin-top:#{$i}PX };
    .mg_r_#{$i} { margin-right:#{$i}px };
    .mg_r_#{$i}_n { margin-right:#{$i}PX };
    .mg_b_#{$i} { margin-bottom:#{$i}px };
    .mg_b_#{$i}_n { margin-bottom:#{$i}PX };
  }
}
.mg_0_auto{margin: 0 auto;}
// 文字对齐 center left right
@each $value in center,left, right {
  .text_#{$value} {text-align: #{$value};}
}
// flex 布局
.flex {display: flex;}
$flexJ:(
  'center': 'center',
  'flex_start': 'flex-start',
  'flex_end': 'flex-end',
  'space_around': 'space-around',
  'space_between': 'space-between',
  'space_evenly': 'space-evenly',
);
$flexA: (
  'center': 'center',
  'flex_start': 'flex-start',
  'flex_end': 'flex-end',
);
@each $key, $value in $flexJ {
  .flex_j_#{$key} {justify-content: #{$value};}
}
@each $key, $value in $flexA {
  .flex_a_#{$key} {align-items: #{$value};}
}
@for $i from 1 through 10 {
  .flex_#{$i} { flex: #{$i} };
}
.flex_column {flex-direction: column;}
.flex_center {display: flex;align-items: center;justify-content:center;}
$widths: (
  'fill': '100%',
  'auto': 'auto',
  'full': '100vh',
  'max_c': 'max-content',
  'min_c': 'min-content',
  'unset': 'unset'
);
@each $key, $value in $widths {
  .height_#{$key} {height: #{$value};}
}

// grid 布局
.grid{display: grid;}

// overflow hidden,auto,scroll
@each $value in hidden,auto,scroll {
  .ov_#{$value} {overflow: #{$value};}
  .ov_y_#{$value} {overflow-y: #{$value};}
  .ov_x_#{$value} {overflow-x: #{$value};}
}
// 设置宽度
$widths: (
  'fill': '100%',
  'auto': 'auto',
  'full': '100vw',
  'max_c': 'max-content',
  'min_c': 'min-content',
  'unset': 'unset'
);
@each $key, $value in $widths {
  .width_#{$key} {width: #{$value};}
}
// 定位
@each $value in fixed, absolute, relative,static {
  .#{$value} {position: #{$value};}
}
@each $value in left, right,bottom,top{
  .#{$value}_0 {#{$value}: 0;}
}
.fixed_all_0{left:0; right:0; bottom:0; top:0;}
// 圆角
$radius: (
  none: '0px',
  full: '99999px',
  oval: '50%',
  inherit: 'inherit'
);
@each $key, $value in $radius{
  .radius_#{$key} {border-radius: #{$value};}
}

// 盒子模型
$boxs: (
  'box_border': 'border-box',
  'box_content': 'content-box'
);
@each $key, $value in $boxs {
  .#{$key} {box-sizing: #{$value};}
}
// 隐藏等
.none{display: none;}
.hide{visibility: hidden}
.border_none{border: none}
.text_ddd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}